<template>
  <view class="ikz">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <view class="ikz-drawal">
      <view
        class="ikz-drawal-top"
        :style="
          'background-image: url(' +
          adminFontPath +
          '/assets/addons/xyb/img/bg.png);background-repeat:no-repeat;background-size:100% 250rpx;'
        "
      >
        <view class="ikz-drawal-top-title"> 我的余额 </view>
        <view class="ikz-drawal-top-tips">
          <view class="ikz-drawal-top-price"> ￥{{ total_price || 0 }} </view>
          <view class="ikz-drawal-top-detailed" @click="goLog"> 提现明细 </view>
        </view>
      </view>
      <view class="ikz-drawal-top-bottom"></view>
      <view class="ikz-drawal-center">
        <!-- <radio-group @change="moneyselect"> -->
        <view class="ikz-drawal-title"> 提现方式 </view>
        <view
          class="ikz-drawal-option"
          style="display: flex; align-items: center"
          v-if="withdrawal_pay_method == 3"
        >
          <image
            src="/static/zfb.png"
            mode="aspectFit"
            style="width: 56rpx; height: 56rpx"
          ></image>
          <view style="margin-left: 20rpx; flex: 1">支付宝提现</view>
          <view>
            <radio value="wx" checked="true" />
          </view>
        </view>
        <view v-if="withdrawal_pay_method == 3" style="padding-top: 16rpx">
          <view>支付宝收款码</view>
          <view style="padding-top: 36rpx">
            <image
              :src="code_image"
              style="width: 280rpx; height: 280rpx"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <view
          class="ikz-drawal-option"
          style="display: flex; align-items: center"
          v-if="withdrawal_pay_method == 2"
        >
          <image
            src="/static/wx.png"
            mode="aspectFit"
            style="width: 56rpx; height: 56rpx"
          ></image>
          <view style="margin-left: 20rpx; flex: 1">微信提现</view>
          <view>
            <radio value="wx" checked="true" />
          </view>
        </view>
        <!-- <view v-if="withdrawal_pay_method == 2" style="padding-top: 16rpx;">
						<view>微信收款码</view>
						<view style="padding-top: 36rpx;">
							<image :src="code_image" style="width: 280rpx;height: 280rpx;" mode="aspectFit"></image>
						</view>
					</view> -->
        <view
          class="ikz-drawal-option"
          style="display: flex; align-items: center"
          v-if="withdrawal_pay_method == 1"
        >
          <image
            src="/static/yl.png"
            mode="aspectFit"
            style="width: 56rpx; height: 56rpx"
          ></image>
          <view style="margin-left: 20rpx; flex: 1">银行卡提现</view>
          <view>
            <radio value="yl" checked="true" />
          </view>
        </view>
        <view
          class="ikz-drawal-btns"
          @click="addCard"
          v-if="!bankcardlist.cardNo && withdrawal_pay_method == 1"
        >
          +添加银行卡
        </view>
        <view
          class="ikz-drawal-texts card-list"
          v-if="bankcardlist.cardNo && withdrawal_pay_method == 1"
        >
          <view style="padding: 32rpx 0">
            <view class="bankcardcontent">
              {{ bankcardlist.openBankNm }} {{ bankcardlist.name }}</view
            >
            <view class="bankcardcardNo"> {{ bankcardlist.cardNo }} </view>
          </view>
          <view class="bankcardchange" @click="updateCard"> 更改银行卡 </view>
        </view>
        <!-- </radio-group> -->
        <view class="ikz-drawal-title"> 提现金额 </view>
        <view class="ikz-drawal-option">
          <view class="ikz-drawal-option-icon"> ￥ </view>
          <input
            class="ikz-drawal-option-input"
            v-model="amount"
            @blur="submitStatuss"
            :placeholder="'最低提现金额' + min_withdrawal_amount + '元'"
          />
          <view class="ikz-drawal-option-all" @click="allInput">
            全部提现
          </view>
        </view>
        <view class="ikz-drawal-title"> 到账金额 </view>
        <view class="ikz-drawal-options">
          <view class="ikz-drawal-option-icon"> ￥ </view>
          <input
            class="ikz-drawal-option-inputs"
            v-model="amount_other"
            :disabled="true"
            :placeholder="'提现手续费' + service_charge + '%'"
          />
        </view>
        <!-- <view class="ikz-drawal-tips">
					提现手续费{{service_charge}}%
				</view> -->
        <view class="ikz-drawal-btn" @click="submitStatus"> 申请提现 </view>
      </view>
    </view>
    <view
      class="ikz-drawal-detail"
      @click.stop="close"
      v-if="submit_status == 3"
    >
      <view class="ikz-drawal-detail-item">
        <view class="ikz-drawal-detail-title"> 提现 </view>
        <view class="ikz-drawal-detail-price"> ￥{{ amount_other }} </view>
        <view class="ikz-drawal-detail-box">
          <view class="ikz-drawal-detail-box-title"> 服务费 </view>
          <view class="ikz-drawal-detail-box-price">
            ￥ {{ service_charge_price }}
          </view>
        </view>
        <view class="ikz-drawal-detail-box">
          <view class="ikz-drawal-detail-box-title"> 服务费 </view>
          <view class="ikz-drawal-detail-box-price">
            {{ service_charge }}%（最低￥0.01）
          </view>
        </view>
        <view class="ikz-drawal-detail-btn" @click="submit()">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
  },
  data() {
    return {
      adminFontPath: app.globalData.adminFontPath,
      loading_css: {
        display: "flex",
      },
      bankcardlist: {
        cardNo: undefined,
        name: undefined,
        openBankNm: undefined,
      },
      wx: false,
      yl: false,
      amount: "",
      total_price: 0.0,
      status: "",
      submit_status: 2,
      amount_other: "",
      service_charge: 0.1,
      service_charge_price: 0.0,
      min_withdrawal_amount: "0.00",
      withdrawal_pay_method: 0,
      code_image: undefined,
    };
  },
  onLoad(options) {
    this.status = options.status;
    this.allPrice((res) => {
      this.loading_css.display = "none";
    });
    this.minPrice();
  },
  onShow() {
    this.getCard();
  },
  onPullDownRefresh() {
    this.allPrice((res) => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    //获取体现最小金额和提现方式
    minPrice() {
      var path = "/xyb/same/min_withdrawal_amount";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.min_withdrawal_amount = res.data.data.min_withdrawal_amount || 0;
          this.withdrawal_pay_method = res.data.data.withdrawal_pay_method || 0;
          this.code_image = res.data.data.code_image;
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    addCard() {
      var url =
        "/pages/Component/Module/Payment/Program/withdrawal/addBankcard/index";
      ikz.nav(url, "ln");
    },
    updateCard() {
      var that = this;
      var id = uni.getStorageSync("bankcardid");
      var name = that.bankcardlist.name;
      var cardNo = that.bankcardlist.cardNo;
      var openBankNm = that.bankcardlist.openBankNm;
      var data = {
        id: id,
        name: name,
        cardNo: cardNo,
        openBankNm: openBankNm,
      };
      var url =
        "/pages/Component/Module/Payment/Program/withdrawal/updateCard/index";
      ikz.nav(url, "ln", data);
    },
    getCard() {
      var path = "/xyb/bank/detail";
      var data = {};
      var that = this;
      ikz.get(path, data, (res) => {
        if (res.data.data) {
          that.bankcardlist = res.data.data;
        }
      });
    },
    moneyselect(e) {
      if (e.detail.value == wx) {
        this.yl = false;
      } else {
        this.yl = true;
      }
    },
    close() {
      this.submit_status = 2;
    },
    allInput() {
      this.amount = this.total_price;
      this.service_charge_price = (
        Math.ceil(
          parseFloat(this.amount).toFixed(2) *
            parseFloat(this.service_charge / 100) *
            100
        ) / 100
      ).toFixed(2);
      this.amount_other = (
        parseFloat(this.amount) - parseFloat(this.service_charge_price)
      ).toFixed(2);
    },
    allPrice(fn = () => {}) {
      if (this.status == 2) {
        var path = "/xyb/user_receive/can_withdrawal_amount";
      } else {
        var path = "/xyb/agent/can_withdrawal_amount";
      }
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.total_price = res.data.data.amount || 0;
          this.service_charge = res.data.data.service_charge || 0;
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    submitStatus() {
      if (!this.bankcardlist.cardNo && this.withdrawal_pay_method == 1) {
        uni.showToast({
          title: "请先绑定提现银行卡",
          icon: "none",
          duration: 2000,
        });
      } else {
        if (!this.amount) {
          uni.showToast({
            title: "请输入正确的金额",
            icon: "none",
            duration: 2000,
          });
          return false;
        }
        if (parseFloat(this.amount) > parseFloat(this.total_price)) {
          uni.showToast({
            title: "请输入正确的金额",
            icon: "none",
            duration: 2000,
          });
          return false;
        }
        if (parseFloat(this.amount) < parseFloat(this.min_withdrawal_amount)) {
          uni.showToast({
            title: "最低提现金额" + this.min_withdrawal_amount + "元",
            icon: "none",
            duration: 2000,
          });
          return false;
        }

        this.service_charge_price = (
          Math.ceil(
            parseFloat(this.amount).toFixed(2) *
              parseFloat(this.service_charge / 100) *
              100
          ) / 100
        ).toFixed(2);
        this.amount_other = (
          parseFloat(this.amount) - parseFloat(this.service_charge_price)
        ).toFixed(2);
        this.submit_status = 3;
      }
    },
    submitStatuss() {
      if (this.amount == "") {
        this.amount_other = "";
      } else {
        this.service_charge_price = (
          Math.ceil(
            parseFloat(this.amount).toFixed(2) *
              parseFloat(this.service_charge / 100) *
              100
          ) / 100
        ).toFixed(2);
        this.amount_other = (
          parseFloat(this.amount) - parseFloat(this.service_charge_price)
        ).toFixed(2);
      }
    },
    submit() {
      if (!this.amount) {
        uni.showToast({
          title: "请输入正确的金额",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (parseFloat(this.amount) > parseFloat(this.total_price)) {
        uni.showToast({
          title: "请输入正确的金额",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      var that = this;
      if (this.status == 2) {
        var path = "/xyb/run_withdrawal_apply/submit";
      } else {
        var path = "/xyb/agent_withdrawal_apply/submit";
      }
      var data = {
        amount: this.amount,
        real_amount: this.amount_other,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          if (wx.canIUse("requestMerchantTransfer")) {
            wx.requestMerchantTransfer({
              mchId: res.data.data.mchId,
              appId: res.data.data.appId,
              package: res.data.data.package_info,
              success: (res) => {
                wx.showModal({
                  content: "提现成功！",
                  showCancel: false,
                });
				this.allPrice();
              },
              fail: (res) => {
                console.log("fail:", res);
              },
            });
          } else {
            wx.showModal({
              content: "你的微信版本过低，请更新至最新版本。",
              showCancel: false,
            });
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        that.submit_status = 2;
        // fn();
      });
    },
    goLog() {
      uni.navigateTo({
        url: "../log/index?status=" + this.status,
      });
    },
  },
};
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}

.ikz-drawal {
  box-sizing: border-box;
  padding: 20rpx 10rpx;
  width: 95%;
  margin: 20rpx auto;
  background: #fff;
  border-radius: 15rpx;
}

.ikz-drawal-top {
  box-sizing: border-box;
  padding: 50rpx 60rpx;
  width: 95%;
  margin: 0 auto;
  color: #fff;
  height: 250rpx;
}

.ikz-drawal-top-title {
  font-size: 40rpx;
}

.ikz-drawal-top-tips {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ikz-drawal-top-price {
  font-weight: 600;
  font-size: 50rpx;
}

.ikz-drawal-top-bottom {
  height: 20rpx;
  width: 80%;
  margin: 0 auto;
  background: #fff1e9;
  border-bottom-left-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
}

.ikz-drawal-center {
  width: 90%;
  margin: 0 auto;
}

.ikz-drawal-title {
  margin-top: 50rpx;
}

.ikz-drawal-option {
  box-sizing: border-box;
  padding: 20rpx 0px;
  margin-top: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.ikz-drawal-options {
  box-sizing: border-box;
  padding: 20rpx 0px;
  margin-top: 15rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.ikz-drawal-option-icon {
  font-size: 40rpx;
}

.ikz-drawal-option-input {
  font-size: 35rpx;
}

.ikz-drawal-option-inputs {
  margin-left: 40rpx;
  font-size: 35rpx;
}

.ikz-drawal-option-all {
  font-size: 28rpx;
  color: #f0ad4e;
}

.ikz-drawal-tips {
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  margin-top: 15rpx;
}

.ikz-drawal-btn {
  width: 90%;
  margin: 50rpx auto 20rpx;
  line-height: 100rpx;
  background: linear-gradient(to right, #fbab7e, #f8c66d);
  text-align: center;
  border-radius: 50rpx;
  color: #fff;
}

.ikz-drawal-btns {
  width: 100%;
  margin: 50rpx auto 20rpx;
  line-height: 100rpx;
  background: #fff8f2;
  text-align: center;
  color: #fbac7d;
}

.ikz-drawal-texts {
  width: 100%;
  margin: 50rpx auto 20rpx;
  background: #fafafa;
}

.card-list {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
}

.bankcardcontent {
  font-size: 30rpx;
}

.bankcardcardNo {
  padding-top: 16rpx;
  font-size: 32rpx;
  color: #fbac7d;
}

.bankcardchange {
  padding-left: 32rpx;
  height: 112rpx;
  line-height: 112rpx;
  font-size: 28rpx;
  color: #ff5959;
  white-space: nowrap;
  border-left: 1px solid #efefef;
}

/* 确认框 */
.ikz-drawal-detail {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.ikz-drawal-detail-item {
  box-sizing: border-box;
  padding: 40rpx;
  width: 80%;
  margin: 0 auto;
  background: #fff;
  border-radius: 25rpx;
  overflow: hidden;
}

.ikz-drawal-detail-title {
  text-align: center;
  line-height: 80rpx;
}

.ikz-drawal-detail-price {
  text-align: center;
  line-height: 60rpx;
  font-size: 40rpx;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 30rpx;
}

.ikz-drawal-detail-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.ikz-drawal-detail-box-title {
  color: #888;
}

.ikz-drawal-detail-btn {
  width: 90%;
  margin: 30rpx auto 0px;
  background-color: #fb9b0a;
  color: #fff;
  border-radius: 50rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>